<div id="headerBar" class="headerBarContainer {% if include.alwayson %} visible{% endif %}">
  <header>
    <a href="{{ '/' | absolute_url }}">
      <img src="{{ '/static/logo_nav.png' | relative_url }}" height="30" width="25" alt="">
      <h2>{{ site.title }}</h2>
    </a>
    <div class="navigationWrapper navigationFull" id="flat_nav">
      <nav class="navigation">
        <ul>
          {% for item in site.data.nav %}
            <li class="navItem{% if page.collection == item.category or page.category == item.category %} navItemActive{% endif %}">
              {% if item.category == "external" %}
                <a href="{{ item.href }}">{{ item.title }}</a>
              {% else %}
                <a href="{{ item.href | relative_url }}">{{ item.title }}</a>
              {% endif %}
            </li>
          {% endfor %}
          <li class="algolia-search-wrapper">
            <input id="algolia-doc-search" type="search" placeholder="Search docs..." />
          </li>
        </ul>
      </nav>
    </div>
    <div class="navigationWrapper navigationSlider" id="navigation_wrap"></div>
  </header>
  <script>
    var event = document.createEvent('Event');
    event.initEvent('slide', true, true);
    document.addEventListener('slide', function (e) {
      document.body.classList.toggle('sliderActive');
    }, false);
    var navData = [
      {% for item in site.data.nav %}
      {
        href       : "{{ item.href }}",
        text       : "{{ item.title }}",
      },
      {% endfor %}
    ];
  </script>
  <script type="text/javascript">
    var Nav = React.createClass({displayName: "Nav",
      getInitialState: function() {
        return {
          currentPath: document.location.pathname,
          slideoutActive: false,
        };
      },
      getDefaultProps: function() {
        return {
          data: navData,
        }
      },
      handleClick: function(id) {
        this.setState({
          slideoutActive: false,
        });
      },
      handleSlide: function(id) {
        this.setState({
          slideoutActive: !this.state.slideoutActive,
        });
      },
      render: function() {
        var classes = React.addons.classSet({
          'navSlideout': true,
          'navSlideoutActive': this.state.slideoutActive,
        });
        var navClasses = React.addons.classSet({
          'slidingNav': true,
          'slidingNavActive': this.state.slideoutActive,
        });
        return (
          React.createElement("div", null,
            React.createElement("div", {className: classes, onClick: this.handleSlide},
              React.createElement("i", null, "☰")
            ),
            React.createElement("nav", {className: navClasses},
              React.createElement("ul", null,
                this.props.data.map(this.renderNavItems)
              )
            )
          )
        );
      },
      renderNavItems: function(child, index) {
        var classes = React.addons.classSet({
          'navItem': true,
          'navItemActive': this.state.currentPath === child.href,
        });
        return (
          React.createElement("li", {key: index, className: classes},
            React.createElement("a", {onClick: this.handleClick, href: child.href}, child.text)
          )
        );
      },
    });

    function render(navData) {
      React.render(
        React.createElement(Nav, {data: navData}),
        document.getElementById('navigation_wrap')
      );
    }
    render(navData);
  </script>
</div>
